<!--摄像头——添加空间——暂未使用，请确认-->
<template>
  <el-drawer
    size="55%"
    :title="visible ? '添加空间' : '修改空间' "
    :visible="visible"
    @close="updateVisible(false)">
    <el-form
      class="table-btn-cls"
      :show-message="false"
      :hide-required-asterisk="false"
      ref="form"
      :rules="rules"
      :model="form"
      label-width="110px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <div class="padding30">
        <el-form-item label="空间名称" class="delInput check-star">
          <el-input
            v-model="form.usageDays"
            placeholder="请输入空间名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="空间ID" class="delInput check-star">
          <el-input
            v-model="form.usageDays"
            placeholder="请输入空间ID"
            clearable
          />
        </el-form-item>
        <el-form-item label="接入网关IP" class="delInput check-star">
          <el-input
            v-model="form.usageDays"
            placeholder="请输入网关IP"
            clearable
          />
        </el-form-item>

        <el-form-item label="接入国标ID" class="delInput check-star">
          <el-input
            v-model="form.usageDays"
            placeholder="请输入国标ID"
            clearable
          />
        </el-form-item>
        <el-form-item label="端口号(UDP)" class="delInput check-star">
          <el-input
            :maxLength="4"
            v-model.number="form.usageDays"
            oninput="value=value.replace(/[^0-9]/g,'')"
            placeholder="请输入端口号"
            clearable
          />
        </el-form-item>

        <el-form-item label="备注" class="delInput check-star">
          <el-input
            type="textarea"
            :rows="6"
            maxLength="500"
            v-model="form.usageDays"
            placeholder="请输入备注"
            clearable
          />
        </el-form-item>
      </div>
      <div class="height130"></div>
    </el-form>
    <div class="flex-columns flxed-botton">
      <div class="color999 m-bottom20">温馨提示：最多不超过<span class="red">10个</span>空间</div>
      <el-button type="primary" class="colorBlue"  @click="confirm()" :loading="loading">保存</el-button>
    </div>
  </el-drawer>
</template>

<script>
  export default {
    name: "add-space",
    data(){
      return{
        form:{},
        rules: {
          activityName: [
            {
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            }
          ],
        },
        loading:false,
        visible:false,
      }
    },
    methods:{
      show(){
        this.visible=true
      },
      //提交
      confirm(){

      },
      /* 更新 visible */
      updateVisible(value) {
        this.visible=value
      },
    }
  }
</script>

<style lang="less" scoped>
  /*设置表格下的form表单——el-form-item*/
  /deep/ .table-btn-cls .el-form-item{
    margin-bottom: 32px !important;
  }
  .height130{
    height: 130px;
  }
  .flxed-botton{
    background-color: #fff;
    height: 130px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding:20px 40px;
    button{
      width: 100px;
      margin: 10px 10px 0;
    }
  }
</style>
